<template>
  <el-card class="box-card">
    <!-- 三级分类表单的结构  inline:行内表单 -->
    <el-form :inline="true">
      <!-- 菜单一 -->
      <el-form-item label="一级分类">
        <el-select v-model="category1Id" :disabled="scene==2?true:false" @change="handler" placeholder="请选择">
          <el-option
            v-for="item in category1List" 
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 菜单二 -->
      <el-form-item label="二级分类">
        <el-select v-model="category2Id" :disabled="scene==2?true:false" @change="handler1" placeholder="请选择">
          <el-option
            v-for="item in category2List" 
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 菜单三 -->
      <el-form-item label="三级分类">
        <el-select v-model="category3Id" :disabled="scene==2?true:false" @change="handler2" placeholder="请选择">
          <el-option
            v-for="item in category3List" 
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
//引入仓库
import $store from '@/store/index'
import { mapGetters } from 'vuex';

export default {
  name: 'Category',
  //响应式数据
  data(){
    return {
      //一级分类id
      category1Id: '',
      //二级分类
      category2Id: '',
      //三级分类
      category3Id: '',
    }
  },
  //定义方法
  methods:{
    //一级分类的下拉菜单的change事件:获取二级分类的数据
    handler(){
      //获取二级分类菜单的数据
      $store.dispatch('category/getC2',this.category1Id)
      //清空二 三级相关数据
      this.category2Id = ''
      this.category3Id = ''
      $store.dispatch('category/setCategory3List')
    },
    //二级分类的下拉菜单的change事件:获取三级分类的数据
    handler1(){
      //获取三级分类菜单的数据
      $store.dispatch('category/getC3',this.category2Id)
      //清空三级相关数据
      this.category3Id = ''
    },
    //三级分类的下拉菜单的change事件:获取平台属性的数据
    handler2(){
      this.$bus.$emit('getData',{
        category1Id: this.category1Id,
        category2Id: this.category2Id,
        category3Id: this.category3Id
      })
    }
  },
  //计算属性
  computed:{
    ...mapGetters('category',['category1List','category2List','category3List'])
  },
  //生命周期
  mounted(){
    $store.dispatch('category/getC1')
    console.log(this.scene);
  },
  props: ['scene']
}
</script>
<style scoped >

</style>